<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      back-icon-name="arrow-leftward"
      title="登录"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <image src="/static/images/logo.png" class="content"></image>
    <view class="form">
      <view class="top">
        <view class="cell">
          <view class="name">用户名</view>
          <view class="input-box">
            <image class="icon" src="/static/images/wyf/用户名.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
            </image>
            <input
              type="text"
              v-model="username"
              placeholder="请输入用户名"
              class="ipt"
              placeholder-class="hold"
              @blur="handleInputCheck"
            />
          </view>
        </view>
        <view class="cell">
          <view class="name">密码</view>
          <view class="input-box">
            <image class="icon" src="/static/images/wyf/密码.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
            </image>
            <input
              type="password"
              v-model="password"
              placeholder="请输入密码"
              class="ipt"
              placeholder-class="hold"
              @blur="handleInputCheck"
            />
          </view>
        </view>
        <button class="submit" @click="submit">登录</button>
        <view @click="register" class="register">快速注册</view>
      </view>
    </view>
  </view>
</template>

<script>
import { login } from "../../api/system/api";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    submit() {
      if (!this.username) {
        this.$refs.uToast.show({
          title: "请输入用户名",
          type: "error",
        });
        return;
      }
      if (!this.password) {
        this.$refs.uToast.show({
          title: "请输入密码",
          type: "error",
        });
        return;
      }
      login({
        username: this.username,
        password: this.password,
      }).then((res) => {
        console.log(res.data);
        if (res.data.role !== "USER") {
          this.$refs.uToast.show({
            title: "您没有权限登录该系统。",
            type: "error",
          });
          return;
        }
        if (res.code === "200") {
          uni.setStorage({
            key: "userInfo",
            data: res.data,
            success: () => {
              this.$refs.uToast.show({
                title: "登录成功",
                type: "",
              });
              uni.switchTab({ url: `/pages/manage/stages` });
            },
          });
        }
      });
    },
    handleInputCheck() {
      this.disabled = false;
    },
    register() {
      this.$u.route("/pages/interest/register");
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;

  .set-icon {
    vertical-align: middle;
    width: 41rpx;
    height: auto;
    margin-right: 35rpx;
  }
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  filter: blur(10px);
  height: 90vh;
  width: 100%;
}
.form {
	position: absolute;
	top: 20%;
	background: #fff;
	padding-bottom: 20px;
	width: 90%;
	left: 5%;
	border-radius: 20rpx;
  .red {
    color: red;
  }
  .top {
    width: 100%;
  }

  .logo {
    display: block;
    width: 581rpx;
    height: auto;
    margin: 0 auto 60rpx;
  }

  .cell {
    width: 100%;
    padding: 0 85rpx;
    box-sizing: border-box;
    margin-top: 36rpx;

    .name {
      font-size: 22rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #3e4a59;
      line-height: 30rpx;
      opacity: 0.72;
    }

    .input-box {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f6f6f6;
      display: flex;
      align-items: center;
      gap: 10rpx;

      .icon {
        width: 30rpx;
        height: 30rpx;
      }

      .code {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #0d0d0d;
        line-height: 30rpx;

        text {
          // color: #14b9c8;
          color: #fa3534;
        }
      }

      .ipt {
        flex: 1;
        // height: 24rpx;
        font-size: 24rpx;
      }

      .hold {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #3e4a59;
        line-height: 30px;
        opacity: 0.45;
      }
    }
  }

  .submit {
    border: none;
    width: 572rpx;
    height: 86rpx;
    line-height: 86rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #fa3534;
    color: #ffffff;

    &::after {
      content: none;
    }

    &::before {
      content: none;
    }

    &[disabled="true"] {
      background: #e4e4e4;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .register {
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9f9f9f;
    line-height: 34rpx;

    &::before {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }

    &::after {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }
  }
}
</style>
